<template>
	<div class="search">
			<Row @keydown.enter.native="handleSearch">
				<Form ref="searchForm" :model="searchForm" inline :label-width="75" class="search-form">
					<Form-item label="手机号">
						<Input type="text" v-model="searchForm.mobile" placeholder="请输入手机号" clearable
							style="width: 200px" />
					</Form-item>
					<Form-item label="区域" prop="name">
						<region ref="region" style="width: 350px" :showIs="true" @selected="selectedRegion" />
					</Form-item>
					<Form-item label="起始时间">
						<DatePicker v-model="outSelectDate" type="datetimerange" format="yyyy-MM-dd" clearable
							@on-change="outSelectDateRange" placeholder="选择起始时间" style="width: 200px">
						</DatePicker>
					</Form-item>
					<Button @click="handleSearch" class="search-btn" type="primary" icon="ios-search">搜索</Button>

					<Button class="search-btn" type="primary" @click="handleReset">重置</Button>

					<download-excel class="export-excel-wrapper" :data="data" :fields="fields" :fetch="exportOrder"
						name="区域代理人.xls">
						<Button type="info" class="export"> 导出 </Button>
					</download-excel>
				</Form>
			</Row>
			<Table border :loading="loading" :columns="columns" class="mt_10" :data="data" ref="table"></Table>
			<Row type="flex" justify="end" class="mt_10">
				<Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize"
					@on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50, 100]"
					size="small" show-total show-elevator show-sizer></Page>
			</Row>
		</Card>
	</div>
</template>

<script>
	import {
		getQYMember
	} from "@/api/financial.js";
	import region from "@/views/agent-manage/region";
	import JsonExcel from "vue-json-excel";
	import {
		getStore,
		setStore
	} from "@/libs/storage.js";

	export default {
		name: "areaAgent",
		components: {
			region,
			"download-excel": JsonExcel,
		},
		data() {
			return {
				fields: {
					会员昵称: 'name',
					手机号码: {
						field: "mobile",
						callback: (value) => {
							return "&nbsp;" + value;
						},
					},
					等级: "levelName",
					区域: {
						field: "region",
						callback: (value) => {
							return "&nbsp;" + value;
						},
					},
					端口费_人民币: {
						field: "dkfXj",
						callback: (value) => {
							return "&nbsp;" + value;
						},
					},
					端口费_焕贝: {
						field: "dkfHb",
						callback: (value) => {
							return "&nbsp;" + value;
						},
					},
					充值钱包_收入_现金充值总额: {
						field: "czSrXj",
						callback: (value) => {
							return "&nbsp;" + value;
						},
					},
					充值钱包_收入_兑换焕贝总额: {
						field: "czSrHb",
						callback: (value) => {
							return "&nbsp;" + value;
						},
					},
					充值钱包_收入_转入: {
						field: "czSrZr",
						callback: (value) => {
							return "&nbsp;" + value;
						},
					},
					充值钱包_支出_消费总额: {
						field: "czZcXf",
						callback: (value) => {
							return "&nbsp;" + value;
						},
					},
					充值钱包_焕贝余额: {
						field: "czYe",
						callback: (value) => {
							return "&nbsp;" + value;
						},
					},
					所辖会员统计_推广数量: {
						field: "memberNum",
						callback: (value) => {
							return "&nbsp;" + value;
						},
					},
					推广会员费钱包_收入_会员费分佣: {
						field: "tgSrHyfy",
						callback: (value) => {
							return "&nbsp;" + value;
						},
					},
					推广会员费钱包_支出消费_消费额: {
						field: "tgHyZcXf",
						callback: (value) => {
							return "&nbsp;" + value;
						},
					},
					推广会员费钱包_支出消费_服务费: {
						field: "tgHyZcFwf",
						callback: (value) => {
							return "&nbsp;" + value;
						},
					},
					推广会员费钱包_支出转账_转出额: {
						field: "tgHyZcZc",
						callback: (value) => {
							return "&nbsp;" + value;
						},
					},
					推广会员费钱包_支出转账_服务费: {
						field: "tgHyZcJf",
						callback: (value) => {
							return "&nbsp;" + value;
						},
					},
					推广会员费钱包_支出提现_提现焕贝额: {
						field: "tgTxHyHb",
						callback: (value) => {
							return "&nbsp;" + value;
						},
					},
					推广会员费钱包_支出提现_人民币元: {
						field: "tgTxHyXj",
						callback: (value) => {
							return "&nbsp;" + value;
						},
					},
					推广会员费钱包_焕贝余额: {
						field: "tgHyYe",
						callback: (value) => {
							return "&nbsp;" + value;
						},
					},
					推广服务费钱包_收入_服务费分佣: {
						field: "tgSrFwfy",
						callback: (value) => {
							return "&nbsp;" + value;
						},
					},
					推广服务费钱包_支出消费_消费额: {
						field: "tgFwZcXf",
						callback: (value) => {
							return "&nbsp;" + value;
						},
					},
					推广服务费钱包_支出消费_服务费: {
						field: "tgFwZcFwf",
						callback: (value) => {
							return "&nbsp;" + value;
						},
					},
					推广服务费钱包_支出转账_转出额: {
						field: "tgFwZcZc",
						callback: (value) => {
							return "&nbsp;" + value;
						},
					},
					推广服务费钱包_支出转账_服务费: {
						field: "tgFwZcJf",
						callback: (value) => {
							return "&nbsp;" + value;
						},
					},
					推广服务费钱包_支出提现_提现焕贝额: {
						field: "tgTxFwHb",
						callback: (value) => {
							return "&nbsp;" + value;
						},
					},
					推广服务费钱包_支出提现_人民币元: {
						field: "tgTxFwXj",
						callback: (value) => {
							return "&nbsp;" + value;
						},
					},
					推广服务费钱包_焕贝余额: {
						field: "tgFwYe",
						callback: (value) => {
							return "&nbsp;" + value;
						},
					},
					焕贝余额合计: {
						field: "yeHj",
						callback: (value) => {
							return "&nbsp;" + value;
						},
					}
				},
				loading: true, // 表单加载状态
				searchForm: {
					// 请求参数
					pageNumber: 1,
					pageSize: 10,
					order: "desc",
					mobile: "",
					startTime: "",
					endTime: "",
					regionId: [],
				},
				outSelectDate: [], // 起止时间
				columns: [{
						title: "序号",
						align: "center",
						key: "index",
						tooltip: true,
						width: "80",
					}, {
						title: "会员昵称",
						align: "center",
						key: "name",
						tooltip: true,
						width: "150",
					},
					{
						title: "手机号码",
						align: "center",
						key: "mobile",
						width: "150",
					},
					{
						title: "级别",
						align: "center",
						key: "levelName",
						width: "100",
					},
					{
						title: "区域",
						align: "center",
						key: "region",
						width: "200",
					},
					{
						title: "端口费",
						align: "center",
						width: "100",
						children: [{
								title: "人民币",
								key: "dkfXj",
								align: "center",
								width: "100",
							},
							{
								title: "焕贝",
								key: "dkfHb",
								align: "center",
								width: "100",
							},
						],
					},
					{
						title: "充值钱包",
						align: "center",
						children: [{
								title: "收入",
								align: "center",
								children: [{
										title: "现金充值总额",
										align: "center",
										key: "czSrXj",
										width: "120",
									},
									{
										title: "兑换焕贝总额",
										key: "czSrHb",
										align: "center",
										width: "120",
									},
									{
										title: "转入",
										key: "czSrZr",
										align: "center",
										width: "120",
									},
								],
							},
							{
								title: "支出",
								align: "center",
								children: [{
									title: "消费总额",
									align: "center",
									key: "czZcXf",
									width: "120",
								}, ],
							},
							{
								title: "焕贝余额",
								key: "czYe",
								align: "center",
								width: "100",
							},
						],
					},
					{
						title: "所辖会员统计",
						align: "center",
						width: "100",
						children: [{
							title: "推广数量",
							align: "center",
							key: "memberNum",
							width: "120",
						}, ],
					},
					{
						title: "推广会员费钱包",
						align: "center",
						children: [{
								title: "收入",
								align: "center",
								width: "100",
								children: [{
									title: "会员费分佣",
									key: "tgSrHyfy",
									align: "center",
									width: "100",
								}, ],
							},
							{
								title: "支出（消费）",
								align: "center",
								width: "100",
								children: [{
										title: "消费额",
										key: "tgHyZcXf",
										align: "center",
										width: "100",
									},
									{
										title: "服务费",
										key: "tgHyZcFwf",
										align: "center",
										width: "100",
									},
								],
							},
							{
								title: "支出（转账）",
								align: "center",
								width: "100",
								children: [{
										title: "转出额",
										key: "tgHyZcZc",
										align: "center",
										width: "100",
									},
									{
										title: "服务费",
										key: "tgHyZcJf",
										align: "center",
										width: "100",
									}
								],
							},
							{
								title: "支出（提现）",
								align: "center",
								width: "100",
								children: [{
										title: "提现焕贝额",
										key: "tgTxHyHb",
										align: "center",
										width: "100",
									},
									{
										title: "人民币（元）",
										key: "tgTxHyXj",
										align: "center",
										width: "100",
									}

								],
							},
							{
								title: "焕贝余额",
								key: "tgHyYe",
								align: "center",
								width: "100",
							},
						],
					},
					{
						title: "推广服务费钱包",
						align: "center",
						children: [{
								title: "收入",
								align: "center",
								width: "100",
								children: [{
									title: "服务费分佣",
									key: "tgSrFwfy",
									align: "center",
									width: "100",
								}, ],
							},
							{
								title: "支出（消费）",
								align: "center",
								width: "100",
								children: [{
										title: "消费额",
										key: "tgFwZcXf",
										align: "center",
										width: "100",
									},
									{
										title: "服务费",
										key: "tgFwZcFwf",
										align: "center",
										width: "100",
									},
								],
							},
							{
								title: "支出（转账）",
								align: "center",
								width: "100",
								children: [{
										title: "转出额",
										key: "tgFwZcZc",
										align: "center",
										width: "100",
									},
									{
										title: "服务费",
										key: "tgFwZcJf",
										align: "center",
										width: "100",
									}
								],
							},
							{
								title: "支出（提现）",
								align: "center",
								width: "100",
								children: [{
										title: "提现焕贝额",
										key: "tgTxFwHb",
										align: "center",
										width: "100",
									},
									{
										title: "人民币（元）",
										key: "tgTxFwXj",
										align: "center",
										width: "100",
									}

								],
							},
							{
								title: "焕贝余额",
								align: "center",
								width: "100",
								key: "tgFwYe",
							},
						],
					},
					{
						title: "焕贝余额合计",
						align: "center",
						key: "yeHj",
						width: "200",
					},
				],
				data: [], // 表单数据
				total: 0, // 表单数据总数
				allData: {}, //合计数据
			};
		},
		methods: {
			// 导出订单
			async exportOrder() {
				if (this.searchForm.regionId) {
					this.searchForm.regionId = this.searchForm.regionId.toString();
				}
				const params = JSON.parse(JSON.stringify(this.searchForm));
				params.pageNumber = 1;
				params.pageSize = 999999999;
				const result = await getQYMember(params);
				if (result.success) {
					if (result.result.page.records.length === 0) {
						this.$Message.warning("暂无可导出数据");
						return [];
					} else {
						return result.result.page.records;
					}
				} else {
					this.$Message.warning("导出数据失败，请重试");
				}
			},
			// 重置
			handleReset() {
				this.outSelectDate = "";
				this.searchForm = {
					pageNumber: 1,
					pageSize: 10,
					order: "desc",
					mobile: "",
					startTime: "",
					endTime: "",
					regionId: [],
				};
				this.$refs.region.addr = [];
				this.getData();
			},
			// 起止时间从新赋值
			outSelectDateRange(v) {
				if (v) {
					this.searchForm.startTime = v[0];
					this.searchForm.endTime = v[1];
				}
			},
			// 选中的地址
			selectedRegion(val) {
				this.searchForm.regionId = val[0];
			},
			// 分页 改变页码
			changePage(v) {
				this.searchForm.pageNumber = v;
				this.getData();
			},
			// 分页 改变页数
			changePageSize(v) {
				this.searchForm.pageSize = v;
				this.searchForm.pageNumber = 1;
				this.getData();
			},
			// 搜索
			handleSearch() {
				this.searchForm.pageNumber = 1;
				this.searchForm.pageSize = 10;
				this.getData();
			},
			//查询会员列表
			getData() {
				this.loading = true;
				this.searchForm.regionId = this.searchForm.regionId.toString();
				getQYMember(this.searchForm).then((res) => {
					if (res.result.page) {
						this.loading = false;
						this.data = [];
						let data = res.result.page.records
						let allData = res.result.All;
						allData.index = "合计"
						for (let i = 0; i < data.length; i++) {
							data[i].index = i+1
						}
						data.push(allData)
						this.data = data;
						this.total = res.result.page.total;
					}
				});
			},
		},
		mounted() {
			this.getData();
		},
	};
</script>
<style lang="scss" scoped>
	.export-excel-wrapper {
		margin-left: 10px;
	}

	/deep/ .ivu-table-wrapper {
		width: 100%;
	}

	/deep/ .ivu-card {
		width: 100%;
	}

	.face {
		width: 60px;
		height: 60px;
		border-radius: 50%;
	}

	.item {
		width: 350px !important;
		display: flex;

		>* {
			margin: 0 4px;
		}
	}

	.totalCount {
		width: 100%;
		height: auto;

		.countTitle {
			width: 100%;
			height: auto;
			font-weight: bold;
			font-size: 24px;
		}

		.totalList {
			display: flex;
			align-items: center;
			flex-flow: row wrap;

			p {
				width: 15%;
				margin-right: 20px;
				font-size: 18px;

				span {
					margin-left: 10px;
				}
			}
		}
	}
</style>
